<style>
.global_form{
    width:800px;
    float:left ;
}
.preview_ads{
    width:200px;
    
    display:block;
    border:1px solid;
    border-radius:25px;
    -moz-border-radius:25px;
    -webkit-border-radius: 25px;
    float: left;
    
    margin-left: 20px;
    margin-top: 40px;
    padding-bottom:20px;    
}
.preview_ads img{
    
    width:100px;
    margin:0 auto;
    margin-top:25px;
}
.preview_ads div{
    margin: 14px auto 0;
    width: 100px;
}
.global_form input[type="text"]{
    width:547px;
}
</style>

<?php  
    $this->headScript()
      ->appendFile($this->baseUrl() . '/application/modules/talktangle/externals/scripts/main.js');
?>
  
<?php echo $this->form->render($this) ?>

<div class="preview_ads" id="preview_ads">
    <img id="preview_ads_image" style="display:none"/>
    <div id="prview_ads_description"></div>
</div>

<script type="text/javascript">
 var iframeUpload = new uploadIframe($('image_upload'));
 function keyUpAdsDescription(el){
    var text = el.get('value');
    $('prview_ads_description').set('text',text);
 }
 function uploadAds(){
     iframeUpload.submitForm();
 }
 function resultUploadIframe(data){
    if(data.error == false){
        var img = $('preview_ads_image');
        if(img){
            img.set('src',data.path);
            img.style.display = 'block';
        } 
        $('imageId').set('value',data.imageId);
        
    }
    else{
        ShowMsg(data.message);
    }
 }
    
</script>